<template>
  <div class="course_find">
    <Header />
    <div class="container">
      <div class="filtrate">
        <div class="filtrate_item">
          <div class="label">方向</div>
          <div class="value">
            <div
              class="value_item"
              :class="[currentOrientationIndex == i ? 'active_item' : '']"
              v-for="(ite, i) in orientationList"
              :key="i"
              @click="orientationClick(ite, i)"
            >
              {{ ite.name }}
            </div>
          </div>
        </div>
        <div class="filtrate_item" v-if="stageList.length !== 0">
          <div class="label">阶段</div>
          <div class="value">
            <div
              class="value_item"
              :class="[currentStageIndex == i ? 'active_item' : '']"
              v-for="(ite, i) in stageList"
              :key="i"
              @click="stageClick(ite, i)"
            >
              {{ ite.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <el-empty
          style="width: 100%; height: 100%"
          description="暂无课程"
          v-if="stageList?.length === 0"
        />
        <div
          class="course_item"
          v-for="(ite, i) in currentCourseList"
          :key="i"
          @click="itemClick(ite)"
        >
          <div class="cover"><img :src="QNURL + ite.cover" alt="" /></div>
          <div class="title">
            {{ ite.name }}
          </div>
          <div class="time">{{ ite.nickName }}</div>
          <!-- <div class="time">2023-12-12</div> -->
        </div>
      </div>
    </div>
    <RightBottomNav />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import { useRouter } from "vue-router";
import { useCourseFindHooks } from "./hook";
import { QNURL } from "@/config/urlConfig";
import RightBottomNav from "@/components/right-bottom-nav/RightBottomNav.vue";

const {
  orientationList,
  stageList,
  currentCourseList,
  currentStageIndex,
  currentOrientationIndex,
  orientationClick,
  stageClick
} = useCourseFindHooks();

const router = useRouter();

function itemClick(item: any) {
  router.push({
    path: "/course",
    query: {
      id: item.id
    }
  });
}
</script>

<style lang="scss" scoped>
.course_find {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-color);

  .container {
    margin: 20px auto;
    width: 1200px;

    .active_item {
      color: var(--orange-color);
      font-size: 18px;
    }

    .filtrate {
      width: 100%;
      min-height: 100px;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;

      &_item {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;

        .label {
          font-size: 18px;
          font-weight: bold;
          position: relative;
          padding: 0 20px;

          &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            background-color: #ff6633;
          }
        }

        .value {
          display: flex;

          &_item {
            padding: 0 20px;
            cursor: pointer;
            // font-weight: bold;

            &:hover {
              color: #ff6633;
            }
          }
        }
      }
    }

    .content {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;

      .course_item {
        width: 290px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
        margin-right: 13.3333px;
        display: flex;
        flex-direction: column;
        margin-bottom: 14px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          box-shadow: var(--card-shadow);

          img {
            transform: scale(1.1);
          }
        }

        &:nth-child(4n) {
          margin-right: 0;
        }

        .cover {
          width: 100%;
          height: 60%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
          }
        }

        .title {
          padding: 0 10px;
          margin-top: 10px;
          height: 40px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; /* 控制显示的行数 */
        }

        .time {
          padding: 0 10px;
          margin-top: 10px;
          color: #73767a;
        }
      }
    }
  }
}
</style>
